import React from 'react';
import Title from './title';
import {useHistory} from 'react-router';
import Lazyload from 'react-lazyload'; 
import style from './Category.module.scss';
interface Iprops {
    categoryList: Array<object>,
}
const Category:React.FC<Iprops> = props=>{
    const history = useHistory();
    return <div className={style.category}>
            {
                props.categoryList.map((item:{ [key: string]: any })=>{
                    return <dl className={style.item} key={item.id}>
                       <Title title={item.name} background="none"/>
                        <div className={style.content}>
                            {
                                item.goodsList.map((v:any)=>{
                                    return <dl 
                                    className={style.item}  
                                    key={v.id}
                                    onClick={()=>history.push(`/addcart/${v.id}`)}
                                    >
                                    <dt>
                                        <Lazyload>
                                            <img src={v.list_pic_url} alt=""/>
                                        </Lazyload>
                                    </dt>
                                    <dd>{v.name}</dd>
                                    <dd><b>￥ {v.retail_price}</b></dd>
                                </dl>
                                })
                            }
                        </div>
                 </dl>
                })
            }
    </div>
}

export default Category 